<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="subjectForm"
        style="padding-right: 30px;"
        :rules="subjectInfosrules"
        ref="subjectForm"
      >
        <el-row>
          <el-col :span="13" style="margin-top: 27px;">
            <el-form-item class="form-item-release" label="规划名称 :">
              <span>{{name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="success" style="margin-top: 31px" @click="resultDetail()">规划详情</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="专家组长 :" prop="expertLeader">
              <el-input v-model="subjectForm.expertLeader" placeholder="请输入专家组长"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="专家组成员名单 :" prop="expertList">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入专家组成员名单"
                v-model="subjectForm.expertList"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="评审时间 :" prop="reviewTime" style="float: left;">
              <div>
                <el-date-picker
                  style="width:320px"
                  v-model="subjectForm.reviewTime"
                  type="datetime"
                  placeholder="选择评审时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="评审结论 :" prop="conclusion">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入评审结论"
                v-model="subjectForm.conclusion"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-group-file-need">
        <span class="form-label-file"><b style="color:red;margin-right: 5px;">*</b>评审报告 :</span>
        <el-upload
          class="upload-demo"
          ref="uploadrelated"
          action="string"
          :http-request="fileUploadRequest"
          :on-preview="fileHandlePreview"
          :on-remove="fileHandleRemove"
          :file-list="fileTypeIds['附件']"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div class="form-group-file" style="padding-left:43px;">
        <span class="form-label-file">其他附件 :</span>
        <el-upload
          class="upload-demo"
          ref="uploadrelated"
          action="string"
          :http-request="otherfileUploadRequest"
          :on-preview="otherfileHandlePreview"
          :on-remove="otherfileHandleRemove"
          :file-list="fileTypeIds['其他附件']"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">历史评审意见</div>
            </div>
          </template>
          <avue-crud :data="resultListData"
                     :option="tableoption"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getResultList">
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
      <div class="form-submit">
        <el-button type="primary" @click.stop="commitList()">保存</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <el-dialog
        title="规划详情"
        :visible.sync="regDetailDialogFlag"
        width="70%"
        :before-close="regDetailClose">
        <div style="float: right;
                      font-size: 18px;
                      text-align: center;
                      margin-right: 51px;" v-if="pmuc">
          <span>规划编码：</span>
          <span style="display: inline-block">{{pmuc}}</span>
        </div>
        <div class="searchDetail">
          <bostech-detail :detail-data="detailData"></bostech-detail>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="regDetailDialogFlag = false">确 定</el-button>
      </span>
      </el-dialog>
      <el-dialog
        title="评审意见详情"
        :visible.sync="opinionDetailDialogFlag"
        width="70%"
        :before-close="opinionDetailClose">
        <div class="searchDetail">
          <bostech-detail :detail-data="opinionDetailData"></bostech-detail>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="opinionDetailDialogFlag = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </basic-container>
</template>
<script>
  import {makeExpertRules} from "@/const/infoRules";
  import {addMakeExpert,getMakeExpertList} from "@/api/make";
  import getDetailData from "@/mixins/getDetailData";
  import getExpertDetail from "@/mixins/make/getExpertDetail";
  import {resultDetail} from "@/api/planning/result";
  import {getNotNull,dealStartEndDate} from '@/views/util'
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  export default {
    name: "reviewOpinion",
    mixins:[getDetailData(),fileTypeMixin,getExpertDetail()],
    created(){
      this.subjectForm.achievementId = this.$route.params.id;
      this.name = this.$route.query.name;
      this.getDetailData();
      window.opinionDetail = this.opinionDetail
    },
    data(){
      return{
        headerData:{
          title:'评审意见'
        },
        subjectInfosrules:makeExpertRules,// 表单验证
        subjectForm: {
        },
        pmuc:'',
        regDetailDialogFlag:false,
        opinionDetailDialogFlag:false,
        name:'',// 规划名称
        activeNames:['1'],
        resultListData:[],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableoption: {
          page: true,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          menuWidth:1,
          menuBtn:false,
          indexLabel: "序号",
          index: true,
          cellBtn: false,
  indexWidth:70,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn:false,
          keyId: "id",
          column: [
            {
              label: "专家组长",
              prop: "expertLeader",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="opinionDetail(\'' + row.expertId + '\')">' + value + '</a>';
              },
            },
            {
              label: "专家组成员名单",
              prop: "expertList",
              cell: true
            },
            {
              label: "评审时间",
              prop: "reviewTime",
              cell: true
            }
          ]
        },
        tableLoading:false,
        opinionDetailData:[],
        fileType:'附件'
      }
    },
    methods:{
      goBack() {
        this.$router.go(-1);
      },
      getResultList(page){
        this.tableLoading = true;
        getMakeExpertList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          achievementId:this.$route.params.id
        })).then(response => {
          this.resultListData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false
        })
      },
      commitList(){
        this.$confirm("确定评审意见么?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$refs.subjectForm.validate(valid => {
            if (valid) {
              this.subjectForm.reportFileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.subjectForm.fileIds = this.getFileIds(this.fileTypeIds['其他附件']);
              addMakeExpert(this.subjectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "添加成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            }
          })
        })
      },
      resultDetail(){
        this.regDetailDialogFlag = true
      },
      regDetailClose(){
        this.regDetailDialogFlag = false
      },
      async opinionDetail(expertId){
        this.opinionDetailData = await this.getDetailData_expert(expertId);
        this.opinionDetailDialogFlag = true
      },
      opinionDetailClose(){
        this.opinionDetailDialogFlag = false
      },
      // 获取规划详情信息
      getDetailData(){
        resultDetail(this.$route.params.id).then(response => {
          this.getresultDetail(response);
        })
      },
      async getresultDetail(response){
        if(response.data.code == '0') {
          var records = response.data.data;
          if(records.fileId!="" && records.fileId !=null) {
            this.multiplefiles = [];
            this.multiplefiles = await this.getfileinfopagetemp(records);
          }
          this.pmuc = records.pmuc;
          this.getresultDetailDate(records)
        }
      },
      getfileinfopagetemp(records){
        return new Promise((resolve, reject) => {
          if(records.fileId!="" && records.fileId !=null){
            getfileinfopage(Object.assign({
              current: 1,
              size: 100,
              fileIds:records.fileId
            })).then(response => {
              var multiplefiles = response.data.data.records;
              resolve(multiplefiles);
            }).catch(
            )
          }
        })
      },
      otherfileUploadRequest(file){
        this.fileUploadRequestName(file,'其他附件')
      },
      // 材料清单附件预览
      otherfileHandlePreview(file){
        this.fileHandlePreviewName(file,'其他附件')
      },
      // 材料清单附件移除
      otherfileHandleRemove(file){
        this.fileHandleRemoveName(file,'其他附件')
      },
    }
  }
</script>

<style lang="scss" scoped>
  
</style>
